<template>
	<view>
		<view class="sannong">
			<view class="searchC">
				<!-- 搜索 -->
				<Search class="search_i" :inputConent="inputConent" :placeholder="placeholder" @goSearch="goSearch"></Search>
			</view>
			<view class="sp-de">
				<view class="sp-de-li">
					<view class="swiper_sw">
						<swiper class="swiper-box" indicator-dots autoplay interval="2000" indicator-active-color="#fff" circular duration="500">
							<swiper-item v-for="(item, index) in info" :key="index">
								<view :class="item.colorClass" class="swiper-item">
									<image class="image" :src="item.url" mode="bottom"/>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="Selection">甄选认养</view>
					<view class="sele-li">
						<view class="cu-ui" :class="{ 'tab-active': tabIndex == 0 }" @click="tabClick(0)">全部</view>
						<view class="cu-ui" :class="{ 'tab-active': tabIndex == 1 }" @click="tabClick(1)">果树认养</view>
						<view class="cu-ui" :class="{ 'tab-active': tabIndex == 2 }" @click="tabClick(2)">家畜认养</view>
					</view>
				</view>
			</view>
			<view class="sp-de" @click="adoptingProducts">
				<view class="c-io">
					<view class="prict"></view>
					<view class="cof-kl">
						<view class="shang-ping">商品名商品名商品名商品名商品名商品名商品名商品名商品名</view>
						<!-- 进度条 -->
						<view class="liu-progress">
							<liu-progressbar :progress="40" :percentageText="'已认养40%'" bgColor="rgba(255,166,85,0.5)" color="#fff" :height="'29rpx'" :borderRadius="'25px'" />
						</view>
						<view class="conetr">
							<view class="price">￥<text>99.00</text></view>
							<view class="prBtn" @click.stop="confirmOrder">立即认养</view>
						</view>
					</view>
				</view>
				<view class="jk-btn">
					<view class="jk-btn-lst">
						<view>品种</view>
						<view>鱼</view>
					</view>
					<view class="jk-btn-lst line">
						<view>成熟日期</view>
						<view>2024-10-1</view>
					</view>
					<view class="jk-btn-lst line">
						<view>状态</view>
						<view>成熟期</view>
					</view>
					<view class="jk-btn-lst line">
						<view>预估产量</view>
						<view>5KG</view>
					</view>
				</view>
				<view class="nav-adress playc">
					<view class="playc n-ad">
						<image src="../../static/adress.png"></image>
						<view class="adress">地址地址地址地址地址地址地址地址地址</view>
					</view>
					<view class="coers playc">
						<image src="../../static/dh.png"></image>
						<view>导航</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Search from '../../components/searchA'; //搜索
	export default {
		components: {
			Search,
		},
		data() {
			return {
				inputConent:'',
				placeholder:'输入名称搜索',
				info: [
					{
						url: '../../static/image/shopp.png',
						content: '内容 A'
					},
					{
						url: '../../static/image/shopp.png',
						content: '内容 B'
					},
					{
						url: '../../static/image/shopp.png',
						content: '内容 C'
					}
				],
				tabIndex:0
			}
		},
		onLoad(options) {
			this.tabIndex = options.tabIndex
		},
		methods: {
			goSearch(){
				
			},
			tabClick(i){
				this.tabIndex = i
			},
			adoptingProducts(){
				uni.navigateTo({
					url:"/pages/home-btn/pages/adoptingProducts/adoptingProducts"
				})
			},
			confirmOrder(){
				uni.navigateTo({
					url:"/pages/home-btn/pages/confirmOrder/confirmOrder"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.sannong{
	width: 100%;
	height: 100%;
}
.searchC{
	width: 95%;
	margin: 0 auto;
}
.sp-de{
	width: 95%;
	margin: 0 auto;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-top: 20rpx;
	.sp-de-li{
		width: 95%;
		margin: 0 auto;
	}
}
.swiper_sw{
	width: 100%;
	height: 268rpx;
	padding: 20rpx 0;
	.swiper-box {
		width: 100%;
		height: 100%;
		.swiper-item {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #D1D1D1;
			border-radius: 10rpx;
			color: #fff;
			.image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	}
}
.Selection{
	font-weight: bold;
	font-size: 26rpx;
	color: #333333;
}
.sele-li{
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	padding-bottom: 35rpx;
	.cu-ui{
		width: 110rpx;
		height: 44rpx;
		line-height: 44rpx;
		background: #F2F2F2;
		border-radius: 22rpx;
		font-weight: 400;
		font-size: 21rpx;
		color: #333333;
		text-align: center;
		margin-right:52rpx;
	}
	.tab-active{
		background-color: #FE9536;
		color: #fff;
	}
}
.c-io{
	display: flex;
	align-items: center;
	padding: 20rpx 20rpx;
	border-bottom: 1px dashed #D9D9D9;
	.prict{
		width: 35%;
		height: 186rpx;
		background: #F2F2F2;
		border-radius: 10rpx;
	}
	.cof-kl{
		width: 61%;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		margin-left: 2%;
		.shang-ping{
			width: 100%;
			min-height: 70rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
		}
	}
}
.liu-progress{
	margin-top: 25rpx;
}
.conetr{
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	margin-top: 20rpx;
	.price{
		font-weight: bold;
		font-size: 26rpx;
		color: #FE0000;
		text{
			font-size: 47rpx;
		}
	}
	.prBtn{
		width: 170rpx;
		height: 54rpx;
		background: #FE9536;
		border-radius: 27rpx;
		text-align: center;
		color: #fff;
		line-height: 54rpx;
	}
}
.jk-btn{
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	padding: 22rpx 0;
	.jk-btn-lst{
		width: 50%;
		text-align: center;
		position: relative;
		font-weight: 400;
		font-size: 21rpx;
		color: #A6A6A6;
		line-height: 30rpx;
	}
}
/* 竖线 */
.line:before {
  content: "";
  background-color: #D9D9D9;
  width: 2px;
  height: 39rpx;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -9px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.playc{
	display: flex;
	align-items: center;
}
.nav-adress{
	justify-content: space-between;
	width: 100%;
	padding: 20rpx 0;
	.n-ad{
		width: 72%;
		margin-left: 35rpx;
		image{
			width: 27rpx;
			height: 27rpx;
		}
		.adress{
			font-weight: 400;
			font-size: 21rpx;
			color: #A6A6A6;
			margin-left: 10rpx;
		}
	}
	.coers{
		height: 42rpx;
		background: #FE9536;
		border-radius: 21rpx;
		margin-right: 20rpx;
		text-align: center;
		margin: 0 auto;
		padding: 0 20rpx;
		color: #FFFFFF;
		font-size: 21rpx;
		image{
			width: 21rpx;
			height: 21rpx;
			margin-right: 10rpx;
		}
	}
}
</style>
